<!--
 * @Author: Afun
-->
<template>
  <!-- <UiPdaFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <van-field
      :ref="info._id"
      v-model.trim="formDataModelLabel"
      v-ui-ref="vSetRef"
      class="border-b-2 rounded-none"
      :class="{ hasPrefix: info.extension.prefixIcon && info.extension.prefixIcon.value }"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :label="info.extension.label.value"
      :left-icon="info.extension.suffixIcon.value ? 'search' : 'none'"
      :name="info.extension.model.value"
      placeholder="请选择"
      readonly
      :required="info.extension.extendRule.value.required && info.extension.extendRule.value.ChangeSwitch"
      type="text"
      @click="clickItem"
    />
    <van-popup position="bottom" :show="showPicker">
      {{ info.extension.labelField.value }}
      <van-picker :columns="optionList" :value-key="info.extension.labelField.value" @cancel="showPicker = false" @confirm="selConfirm($event)" />
    </van-popup>
  </UiPdaFormItem> -->
  <UiPdaFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <!-- <div class="w-full border-b-2 rounded-none"> -->
    <div class="w-full">
      <van-checkbox
        :ref="info._id"
        v-model="formDataModel"
        v-ui-ref="vSetRef"
        :checked-color="info.extension.checkBoxColor.value"
        class="w-full checkbox"
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        icon-size="14px"
        :label-position="info.extension.checkBoxType.value"
        @change="handleCheck"
      >
        {{ info.extension.label.value }}
      </van-checkbox>
    </div>
  </UiPdaFormItem>
</template>
<script>
  import { Checkbox } from 'vant'
  // import request from '@/utils/request'
  // import { GFCD } from '@/utils/utils'
  // import isEmpty from 'lodash/isEmpty'
  // import merge from 'lodash/merge'
  // import trim from 'lodash/trim'
  // import isArray from 'lodash/isArray'
  // import cloneDeep from 'lodash/cloneDeep'
  // import { customAlphabet } from 'nanoid'
  import { defineComponent } from 'vue'
  // import { processingConstant, replaseRegVariable } from '@ve/utils/utils'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'

  export default defineComponent({
    name: 'UiPdaCheckBox',
    components: {
      [Checkbox.name]: Checkbox,
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    data() {
      return {
        // checked: false,
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
      }
    },
    watch: {
      //
      checked: {
        handler(newVal) {
          console.log('newVal--newVal', newVal)

          this.formDataModel = newVal

          if (this.formDataModel) {
            this.formDataModel = '1'
          } else {
            this.formDataModel = '0'
          }
        },
      },
    },
    mounted() {
      this.formDataModel = false //绑定form表单字段
    },

    methods: {
      handleCheck() {
        // this.formDataModel = this.checked //绑定form表单字段
        console.log('复选this.checked', this)
        this.onChange()
        // 触发条件判断值改变
        // this.setPageModulesState('value', this.formDataModel)
      },
    },
  })
</script>
<style scoped>
  .checkbox {
    font-size: 0.6rem;
    padding-top: 3%;
    /* position: absolute;
    top: 5%;
    left: 35%; */
  }
</style>
